<template>
  <div class="map-wrap" id="chart"> </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    toRefs,
    reactive,
    ref,
    onMounted,
    onUnmounted,
    onBeforeUnmount,
    watch,
    nextTick,
  } from 'vue';
  import * as echarts from 'echarts';
  import _ from 'lodash';
  //引入axios用于读取本地geo的json文件
  import axios from 'axios';
  import { chinaBoundaryData, chinaData } from './chinaBoundary';
  import { geoCoordinatesData } from './chinaMap';

  export default defineComponent({
    name: 'EchartsChinaGeoMapTest',
    components: {},
    props: {},
    setup(props, context) {
      const points = [
        { station: '北京市', num: 10 },
        { station: '上海市', num: 5 },
        { station: '西安市', num: 6 },
        { station: '重庆市', num: 5 },
        { station: '延庆区', num: 2 },
        { station: '阿勒泰地区', num: 8 },
      ];

      /* 
chinaBoundary：绘制地图边界线，制作2d倾斜效果
注册地图时，使用china名称会产生南海诸岛，改用其他名字即可不展示南海诸岛 
echarts.registerMap("chinaMap", chinaData);
*/

      let option = {
        backgroundColor: '#013954',
        geo: [
          {
            map: 'chinaBoundary',
            aspectScale: 1, //长宽比
            zoom: 1,
            roam: false,
            animation: false,
            silent: true,
            center: [105, 30],
            top: 125,
            scaleLimit: {
              min: 1,
              max: 5,
            },
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: 'rgb(147, 235, 248)',
              borderWidth: 0,
              emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
              },
            },
          },
          //地图边界的显示
          {
            map: 'chinaBoundary',
            aspectScale: 1, //长宽比
            zoom: 1,
            roam: false,
            animation: false,
            silent: true,
            center: [105, 30],
            scaleLimit: {
              min: 1,
              max: 5,
            },
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: 'rgb(147, 235, 248)',
              borderColor: 'rgb(147, 235, 248)',
              borderWidth: 5,
              shadowColor: 'rgba(147, 235, 248, 0.6)',
              shadowBlur: 20,
              emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
              },
            },
          },
          {
            map: 'chinaMap',
            aspectScale: 1, //长宽比
            zoom: 1,
            roam: false,
            animation: false,
            center: [105, 30],
            scaleLimit: {
              min: 1,
              max: 5,
            },
            label: {
              show: false,
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              areaColor: '#274d68',
              borderColor: 'rgb(147, 235, 248)',
              borderWidth: 1,
              emphasis: {
                areaColor: 'rgb(46,229,206,0.3)',
                borderWidth: 0.1,
              },
            },
          },
        ],
        //series中，第0个用于，第1个用于points中给定的点集合的气泡效果，第2个用于绘制飞行图（每个线条指定不同颜色）
        series: [
          {
            type: 'map',
            roam: true,
            aspectScale: 1, //长宽比
            animation: false,
            center: [105, 30],
            zoom: 1,
            map: 'chinaMap', //使用
            scaleLimit: {
              min: 1,
              max: 5,
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#1DE9B6',
                },
              },
              emphasis: {
                textStyle: {
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(147, 235, 248,0.7)',
                borderWidth: 1,
                areaColor: '#274d68',
              },
              emphasis: {
                areaColor: 'rgb(46,229,206,0.3)',
                borderWidth: 0.1,
              },
            },
          },
          //带有涟漪特效动画的散点（气泡）图
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            geoIndex: 2,
            showEffectOn: 'render',
            zlevel: 3,
            //涟漪特效相关配置
            rippleEffect: {
              period: 15, //动画的周期，秒数
              scale: 4, //动画中波纹的最大缩放比例
              brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
            },
            symbolSize: 12,
            hoverAnimation: true,
            label: {
              position: 'right',
              offset: [15, 0],
              color: '#1DE9B6',
              show: true,
              formatter: (val: any) => {
                return `{a|${val.name}:}{b|${val.value[2]}}`;
              },
              rich: {},
            },
            itemStyle: {
              normal: {
                color: '#1DE9B6',
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            emphasis: {
              label: {
                fontSize: 20,
                shadowColor: '#00345d',
                shadowBlur: 15,
              },
            },
            data: [],
          },
          //地图线的动画效果，飞行图
          {
            type: 'lines',
            geoIndex: 2,
            zlevel: 3,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 7, //图标大小
            },
            lineStyle: {
              normal: {
                color: '#1DE9B6',
                width: 1, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
              },
            },
            data: [
              {
                coords: [
                  [118.8062, 31.9208],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#4ab2e5' },
              },
              {
                coords: [
                  [127.9688, 45.368],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#4fb6d2' },
              },
              {
                coords: [
                  [110.3467, 41.4899],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#52b9c7' },
              },
              {
                coords: [
                  [125.8154, 44.2584],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#5abead' },
              },
              {
                coords: [
                  [116.4551, 40.2539],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#f34e2b' },
              },
              {
                coords: [
                  [123.1238, 42.1216],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#f56321' },
              },
              {
                coords: [
                  [114.4995, 38.1006],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#f56f1c' },
              },
              {
                coords: [
                  [117.4219, 39.4189],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#f58414' },
              },
              {
                coords: [
                  [112.3352, 37.9413],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#f58f0e' },
              },
              {
                coords: [
                  [109.1162, 34.2004],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#f5a305' },
              },
              {
                coords: [
                  [103.5901, 36.3043],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#e7ab0b' },
              },
              {
                coords: [
                  [106.3586, 38.1775],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#dfae10' },
              },
              {
                coords: [
                  [101.4038, 36.8207],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#d5b314' },
              },
              {
                coords: [
                  [103.9526, 30.7617],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#c1bb1f' },
              },
              {
                coords: [
                  [108.384366, 30.439702],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#b9be23' },
              },
              {
                coords: [
                  [113.0823, 28.2568],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#a6c62c' },
              },
              {
                coords: [
                  [102.9199, 25.46639],
                  [119.4543, 25.9222],
                ],
                lineStyle: { color: '#96cc34' },
              },
            ],
          },
        ],
      };

      const convertData = (data: any, geoCoorMap: any) => {
        const res = [];
        data.forEach((item) => {
          geoCoorMap.forEach((ele) => {
            if (ele.name.includes(item.station)) {
              res.push({
                name: item.station,
                value: ele.center.concat(item.num),
              });
            }
          });
        });
        return res;
      };

      let myChart = null;
      const initChart = () => {
        myChart = echarts.init(document.getElementById('chart'));

        echarts.registerMap('chinaBoundary', chinaBoundaryData);
        echarts.registerMap('chinaMap', chinaData);

        //指定points中的气泡样式
        option.series[1].data = convertData(points, geoCoordinatesData);
        // option.series[0].data = convertData(points, geoCoordinatesData);

        myChart && myChart.setOption(option, true);

        // 缩放统一大小
        myChart.off('georoam');
        myChart.on('georoam', (e) => {
          if (e.componentType === 'series') {
            const myOption = myChart.getOption();
            myOption.geo[0].zoom = myOption.series[0].zoom;
            myOption.geo[0].center = myOption.series[0].center;
            myOption.geo[1].zoom = myOption.series[0].zoom;
            myOption.geo[1].center = myOption.series[0].center;
            myOption.geo[2].zoom = myOption.series[0].zoom;
            myOption.geo[2].center = myOption.series[0].center;
            myChart.setOption(myOption);
          }
        });
      };

      onMounted(() => {
        initChart();
      });
      return {};
    },
  });
</script>
<style scoped lang="less">
  .map-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .full-map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 5;
      background-color: transparent;
    }
  }
</style>
